<template>
    <el-table
        class="table-mb"
        v-loading="loading"
        :data="arr_data"
        row-key="sid"
        :header-cell-style="{
            background: '#F5F7FA',
            textAlign: 'center',
        }"
        :cell-style="
            ({ column }) => {
                return {
                    textAlign:
                        column.className === 'operation-nav'
                            ? 'left'
                            : 'center',
                    paddingLeft:
                        column.className === 'operation-nav' ? '25px' : '0',
                };
            }
        "
        max-height="500px"
        border
        element-loading-background="rgba(255, 255, 255, 0.6)"
    >
        <el-table-column
            prop="orderCode"
            label="订单流水号"
            min-width="200"
            fixed="left"
        >
        </el-table-column>
        <el-table-column prop="adjustType" label="类型" min-width="100">
            <template #default="{ row }">
                <p>
                    {{
                        dictStore.getDictMemberName(
                            "order_adjust_type",
                            row.adjustType
                        )
                    }}
                </p>
            </template>
        </el-table-column>
        <el-table-column prop="preAmount" label="调整前金额" min-width="140">
            <template #default="{ row }">
                {{ fenToYuan(row.preAmount) }}元
            </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="调整后金额" min-width="140">
            <template #default="{ row }">
                {{ fenToYuan(row.afterAmount) }}元
            </template>
        </el-table-column>
        <el-table-column prop="priceDifference" label="差价" min-width="140">
            <template #default="{ row }">
                {{ fenToYuan(row.priceDifference) }}元
            </template>
        </el-table-column>
        <el-table-column prop="disposeStatus" label="处理状态" min-width="100">
            <template #default="{ row }">
                {{
                    dictStore.getDictMemberName(
                        "order_adjust_dispose",
                        row.disposeStatus
                    )
                }}
            </template>
        </el-table-column>
        <el-table-column
            prop="created"
            label="创建时间"
            min-width="200"
        ></el-table-column>
        <el-table-column
            label="操作"
            width="120"
            class-name="operation-nav"
            fixed="right"
        >
            <template #default="{ row }"
                ><MoreBtn
                    :buttons="[
                        {
                            props: {
                                onClick: () => onClickPayment(row.sid),
                                'v-hasPermi': ['enttp:order:adjust:payment'],
                            },
                            text: '补款打款',
                            isRender:
                                row.adjustType === 1 && row.disposeStatus === 0,
                        },
                    ]"
                />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { reactive, ref, watch, inject } from "vue";
import {
    getOrderAdjustRecord,
    payCompensatoryOrder,
} from "@/apis/order/order.js";
import MoreBtn from "@/components/MoreBtn.vue";
import { ElMessageBox } from "element-plus";
import { fenToYuan } from "@/assets/common/utils.js";
import OneLoad from "@mixins/one-load";
import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();
dictStore.getDictMembers("order_adjust_type");
dictStore.getDictMembers("order_adjust_dispose");

const props = defineProps({
    sid: {
        type: String,
        required: true,
    },
    show: {
        type: Boolean,
        default: false,
    },
});

const $message = inject("$message");

const { loading, arr_data, pubRefreshParams, getdata } = OneLoad();

function getList() {
    getdata(
        getOrderAdjustRecord({
            sid: props.sid,
        })
    );
}

watch(
    [() => props.sid, () => props.show],
    ([sid, show]) => {
        sid && show && pubRefreshParams(getList);
    },
    { immediate: true }
);

const onClickPayment = async (sid) => {
    await ElMessageBox.confirm("确定打款吗？");
    const res = await payCompensatoryOrder({ sid });
    if (res.data.code == 200) {
        $message({ message: "操作成功", type: "success" });
        pubRefreshParams(getList);
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};
</script>
